<template>

  <v-card @click.stop="cardClickHandle" :height="height" v-ripple :class="bgImage" :style="styleObject" >

    <v-card-text class="custom-card">

      <!-- <v-icon :style="{backgroundColor:textColor}">{{icon}}</v-icon> -->
      <!-- <i class="iconfont iconwuliao1" :style="{backgroundColor:textColor}"></i> -->
      <!-- <div class="text" :style="{color:textColor}">{{cardText}}</div> -->

      <div class="text">
        <span>{{cardText}}</span>
        <v-icon>iconfont-icon iconxiangyou</v-icon>
      </div>

    </v-card-text>

  </v-card>

</template>

<script>
  /**
   * 主页菜单卡片
   * @author Canaan
   * @date 2019/8/10 12:45.
   */
  export default {
    name: 'IndexMenuCard',
    mounted() {

    },
    components: {},
    props: {
      cardText: {
        default: null,
        type: String
      },

      height: {
        default: 85,
        type: Number
      },
      bgImage: {
        type: String
      },
      remark: {
      }

    },
    data() {
      return {
        styleObject: {
          backgroundSize: '76px 84px',
          backgroundPosition: '94% 0',
          overflow: 'hidden',

        }
      }
    },
    computed: {
      infoHandler() {
        var html = "";

        // for (var i = 0; i < this.remark.length; i++) {

        // if (this.remark[i].text == "查看完整物料信息") {
        //   return "查看完整物料信息"
        // }

        // if (this.remark[i].text == "已更新至最新版本") {
        //   return "已更新至最新版本"
        // }


        // if (this.remark[i].text == "新增入库记录") {
        //   return '<span style="font-size:24px;margin-right:10px;">' + this.remark[i].data + '</span>' + "新增入库记录"
        // }


        // if (this.remark[i].text == "新增出库记录") {
        //   return '<span style="font-size:24px;margin-right:10px;">' + this.remark[i].data + '</span>' + "新增出库记录"
        // }

        // if (this.remark[i].text == "统计报表已生成") {

        //   return '<span style="font-size:24px;margin-right:10px;">' + this.remark[i].data + '</span>' + "统计报表已生成"
        // }


        // if (this.remark[i].text == "即将到期") {

        //   html += '<span style="font-size:24px;margin-right:10px;">' + this.remark[i].data + '</span>' + this
        //     .remark[i].text

        // }

        // if (this.remark[i].text == "已经到期") {
        //   html += '<span style="font-size:24px;margin:0 10px;">' + this.remark[i].data + '</span>' + this
        //     .remark[i].text
        //   return html
        // }

        // }


      }
    },
    methods: {
      cardClickHandle() {
        this.$emit('click');
      }
    },
    watch: {},
    filters: {},
    beforeDestroy() {

    }
  }

</script>

<style scoped>
  .v-card__text {
    padding: 8px 16px;
  }

  .v-card{
    background-color: #fff !important;
    box-shadow: 0 0 2px #ddd !important;
  }

  .text {
    font-size: 16px;
    font-weight: bold;
    color: #000;
  }

  .navInfo {
    font-family: "MicrosoftYaHei";
    font-size: 11px;
    color: #666666;
  }

  .mgl-10 {
    margin-left: 10px;
  }


  .text span {
    vertical-align: middle;
    margin: 10px;
  }

  .bg-material-info {
    background: url("../../assets/img/home_list_nav/01_material-info.png") no-repeat;
  }

  .bg-material-info::after {
    content: "";
    width: 85px;
    height: 85px;
    background: #2cbc87;
    border-radius: 100%;
    position: absolute;
    left: -76px;
    top: 0;
  }

  .bg-inventory-record {
    background: url("../../assets/img/home_list_nav/02_inventory-record.png") no-repeat;
  }

  .bg-inventory-record::after {
    content: "";
    width: 85px;
    height: 85px;
    background: #f4ad49;
    border-radius: 100%;
    position: absolute;
    left: -76px;
    top: 0;
  }


  .bg-inventory-warning {
    background: url("../../assets/img/home_list_nav/03_inventory-warning.png") no-repeat;
  }

  .bg-inventory-warning::after {
    content: "";
    width: 85px;
    height: 85px;
    background: #f46161;
    border-radius: 100%;
    position: absolute;
    left: -76px;
    top: 0;
  }


  .bg-inventory-trace {
    background: url("../../assets/img/home_list_nav/04_inventory-trace-record.png") no-repeat;
  }
  .bg-inventory-trace::after {
    content: "";
    width: 85px;
    height: 85px;
    background: #48a2f6;
    border-radius: 100%;
    position: absolute;
    left: -76px;
    top: 0;
  }


  .bg-inventory-report {
    background: url("../../assets/img/home_list_nav/05_inventory-report.png") no-repeat;
  }
  .bg-inventory-report::after {
    content: "";
    width: 85px;
    height: 85px;
    background: #c452ff;
    border-radius: 100%;
    position: absolute;
    left: -76px;
    top: 0;
  }

  .bg-system-setup {
    background: url("../../assets/img/home_list_nav/06_system-setup.png") no-repeat;
  }

  .bg-system-setup::after {
    content: "";
    width: 85px;
    height: 85px;
    background: #5c5cf0;
    border-radius: 100%;
    position: absolute;
    left: -76px;
    top: 0;
  }

  .v-icon {
    font-weight: normal;
    vertical-align: middle;

  }

  /* .v-icon::before,
  .v-icon::after {
    text-decoration: inherit;
    vertical-align: unset;
  } */

  .custom-card {
    height: 100%;
    display: flex;
    align-items: center;
  }

</style>
